﻿
@{
    ViewBag.Title = "RispeSetting";
}
<style>
    tr td {
        text-align: center !important;
        display: table-cell !important;
        vertical-align: middle !important;
    }
</style>
<div class="title-content">食谱设置</div>
<script src="~/Scripts/upLoadFile/upLoadFile.js"></script>
<div class="row">
    <div class="col-md-12">
        <!-- BEGIN EXAMPLE TABLE PORTLET-->
        <div class="portlet light ">
            <div class="portlet-body">
                <div class="table-toolbar">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="btn-group">
                                <a class="btn sbold green" href="#newAdd" onclick="AddOrUpdate()" data-toggle="modal">新增食谱</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="dataTables_wrapper no-footer">
                    <div class="row">
                        <div class="col-md-6 col-sm-6">
                            <div class="dataTables_length" id="sample_1_length">
                                <label>
                                    显示条数 <select id="changePageSize" onchange="pageSizeChange()" class="form-control input-sm input-xsmall input-inline">
                                        <option value="10">10</option>
                                        <option value="20">20</option>
                                        <option value="50">50</option>
                                    </select>
                                </label>
                            </div>
                        </div>
                        <div class="col-md-6 col-sm-6">
                            <div id="sample_1_filter" class="dataTables_filter">
                                <div class="col-md-6">
                                    <div class="input-group input-sm date date-picker" style="margin-top:-7px" data-date-format="yyyy-mm-dd" data-date-end-date="">
                                        <input type="text" id="startDates" class="form-control" placeholder="食谱日期">
                                        <span class="input-group-btn">
                                            <button class="btn default" type="button">
                                                <i class="fa fa-calendar"></i>
                                            </button>
                                        </span>
                                    </div>
                                </div>
                                <button type="button" class="btn btn-sm blue" onclick="GridData()">查找<i class="fa fa-search"></i></button>
                            </div>
                        </div>
                    </div>
                    <div class="table-scrollable">
                        <table class="table table-striped table-bordered table-hover order-column dataTable no-footer" align="center" role="grid" aria-describedby="sample_1_info">
                            <thead>
                                <tr role="row">
                                    @*<th rowspan="1" colspan="1" style="width: 30px;text-align:center;"><input type="checkbox" id="ckAll" class="checkbox2" style="-webkit-appearance:checkbox;opacity:1;width:20px;height:20px;" /></th>*@
                                    <th tabindex="0" rowspan="1" colspan="1"> 图片 </th>
                                    <th tabindex="0" rowspan="1" colspan="1"> 食谱 </th>
                                    <th tabindex="0" rowspan="1" colspan="1"> 早/中/晚 </th>
                                    <th tabindex="0" rowspan="1" colspan="1"> 食谱日期 </th>
                                    <th class="td-text-center" tabindex="0" rowspan="1" colspan="1" style="width: 127px;"> 操作设置 </th>
                                </tr>
                            </thead>
                            <tbody id="gridTable"></tbody>
                        </table>
                        <script id="grid" type="text/html">
                            <% for(var i=0;i
                            <list.length;i++){ %>
                                <% var item=list[i]; %>
                                <tr class="gradeX" role="row" id="<%=item.schoolId %>">
                                    @*<td class="td-text-center"><input type="checkbox" name="ckchild" schoolId="<%=item.schoolId %>" class="checkbox2"></td>*@
                                    <td><img style="height:40px;width:40px" src="<%=item.footImg %>" /></td>
                                    <td name="courseName"><%=item.footName %></td>
                                    <td name="type"><%=item.name %></td>
                                    <td name="startDate"><%=item.startDate.substring(0,10) %></td>
                                    <td>
                                        <a class="btn btn-sm green" href="#newAdd" onclick="update('<%= item.id %>')" data-toggle="modal">修改</a>
                                        <a class="btn btn-sm red" href="" onclick="DelData('<%= item.id %>')" data-toggle="modal">删除</a>
                                    </td>
                                </tr>
                                <%}%>
                        </script>
                    </div>
                    <div class="row">
                        <div class="col-md-5 col-sm-5"><div class="dataTables_info" id="data_info">显示 1 到 10 共 0 条</div></div>
                        <div class="col-md-7 col-sm-7">
                            <!--加载分页控件-->
                            @Html.Partial("DataPager")
                        </div>
                    </div>
                </div>
            </div>
            <!-- END EXAMPLE TABLE PORTLET-->
        </div>
    </div>
</div>
<!-- 弹出层，新增食谱-->
<div id="newAdd" class="modal fade" tabindex="-1" data-focus-on="input:first" data-width="700">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
        <h4 id="editTitle" class="modal-title">食谱设置</h4>
    </div>
    <div class="modal-body">
        <div style="margin-left:10px;">
            <div action="#" class="form-horizontal" role="form">
                <div class="form-group">
                    <label class="col-md-3 control-label">食谱名称</label>
                    <div class="col-md-9">
                        @*<div style="position:relative;left:-5px;" id="disName">
                            </div>*@
                        <div class="input-group input-sm col-md-12">
                            <input type="text" id="respese" class="form-control" placeholder="米饭#鸡丁黄瓜#蕃茄菜花">
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-3 control-label">食谱日期</label>
                    <div class="col-md-9">
                        <div class="input-group input-sm date date-picker col-md-5" data-date-format="yyyy-mm-dd" data-date-end-date="">
                            <input type="text" id="startDate" class="form-control" readonly="">
                            <span class="input-group-btn">
                                <button class="btn default" type="button">
                                    <i class="fa fa-calendar"></i>
                                </button>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-3 control-label">早/中/晚</label>
                    <div class="col-md-9">
                        <div class="input-group input-sm col-md-5">
                            <select aria-hidden="true" tabindex="-1" id="type" class="form-control select2 select2-hidden-accessible"></select>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-3 control-label">食谱图片</label>
                    <div class="col-md-9">
                        <div class="input-group input-sm col-md-6">
                            <img id="imgsourse" src="" style="width:80px;height:80px;" />
                            <a href="#addsource" style="margin-left:30px;" data-toggle="modal" class="btn sbold green">上传</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer" style="height:auto;">
        <button hidden="hidden" id="Id"></button>
        <button class="btn default" data-dismiss="modal" id="editNameCloseBtn" aria-hidden="true">关闭</button>
        <button class="btn green" data-dismiss="" onclick="Submit()">提交</button>
    </div>
</div>
<!-- 弹出层，上传图片-->
<div id="addsource" class="modal fade" tabindex="-1" data-focus-on="input:first" data-width="600">
    <div class="modal-content" style="height:400px;">
        <div class="modal-header">
            <button type="button" id="btnUploadPhotoClose" class="close" data-dismiss="modal" aria-hidden="true"></button>
            <h4 id="editTitle" class="modal-title">上传图片来源</h4>
        </div>
        <div class="modal-body">
            <div style="margin-left:10px;">
                <div>
                    <input type="file" value="" id="fileInput" name="files" onchange="fileSelected()" />
                    <div style="margin:30px;">
                        <input type="button" value="上传" onclick="uploadFile('rispe')" />
                    </div>
                    <div style="margin:30px;">
                        <div id="fileName"></div>
                        <div id="fileSize"></div>
                        <div id="fileType"></div>
                    </div>
                    <div style="margin:30px;width:500px;height:15px;border:1px solid #aeaeae;">
                        <div id="progress" style="background:#4cff00;height:15px;width:0%;"></div>
                        <div id="percentNumber"></div>
                    </div>
                    <div style="margin:30px;">
                        <div id="msg"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



<script>
    var iu = "update";//修改或新增状态，默认新增状态
    //load加载
    $(function () {
        GridData();
        //绑定类型
        BindType();
    });
    //删除
    function DelData(id) {
        if (confirm("你确定要删除吗")) {
            AjaxCustom({
                url: "/RispeSetting/DelData",
                type: "post",
                showLoading: true,
                parames: { id: id },
                callBack: function (obj) {
                    if (obj.code == 1) {
                        AlertMsg("删除成功");
                        pageIndex = 1;
                        GridData();
                    }
                    else {
                        AlertMsg("删除失败");
                    }
                }
            });
        }
    }

    //显示修改
    function update(id) {
        //改变状态值
        iu = "update";
        AjaxCustom({
            url: "/RispeSetting/SelectForId",
            type: "post",
            showLoading: true,
            parames: { id: id },
            callBack: function (obj) {
                $("#respese").val(obj.data[0].footName),
                $("#startDate").val((obj.data[0].startDate).substring(0, 10)),
                $("#type").val(obj.data[0].type),
                $("#Id").val(obj.data[0].id)
                $("#imgsourse").attr("src", obj.data[0].footImg);

                //var com = document.getElementsByName("classId");
                //for (var i = 0; i < com.length; i++) {
                //    if (obj.data[0].footName.indexOf(com[i].value) == -1)
                //        com[i].checked = false;
                //    else
                //        com[i].checked = true;
                //}
                if ($("#type").val() == "" || $("#type").val() == null) {
                    document.getElementById("type")[0].selected = true;
                }
            }
        });
    }
    //改变页大小
    function pageSizeChange() {
        var count = $("#changePageSize").val();
        pageSize = count;
        pageIndex = 1;
        GridData();
    }
    //绑定类型
    function BindType() {
        AjaxCustom({
            url: "/RispeSetting/getTypes",
            type: "post",
            showLoading: true,//是否显示遮罩层
            callBack: function (obj) {
                //for (var i = 0; i < obj.data.recipe.length; i++) {
                //    var str = '<div class="class_checkbox" style="float:left;margin-left:12px;"><label> <input name="classId" style="width:15px;height:15px" type="checkbox" value="' + obj.data.recipe[i].name + '" /><span style="margin-left:5px;font-size:16px">' + obj.data.recipe[i].name + '</span></label></div>';
                //    $("#disName").append(str);
                //}
                for (var i = 0; i < obj.data.recipe_type.length; i++) {
                    var sel = $("#type");
                    sel.append(new Option(obj.data.recipe_type[i].name, obj.data.recipe_type[i].id));
                }
            }
        });
    }

    function AddOrUpdate() {
        //状态为新增
        iu = "add";
        //初始化值
        $("#footName").val("");
        $("#startDate").val("");
        $("#imgsourse").attr("src", "");
        //清空选中
        //var com = document.getElementsByName("classId");
        //for (var i = 0; i < com.length; i++) {
        //    com[i].checked = false;
        //}
        $("#respese").val("");
        document.getElementById("type")[0].selected = true;
    }
    //提交
    function Submit() {
        var footnams = $("#respese").val(); //食谱 
        if (footnams == "" || $("#startDate").val() == "" || $("#schoolId").val() == "") {
            AlertMsg("请将信息填写完整！");
            return;
        } 
        var footNameLen = footnams.length;
        if (footNameLen > 40) {
            AlertMsg("食谱名称超过限定长度！" + footNameLen);
            return;
        } 
        var data = {
            type: iu,
            footName: footnams,
            startDate: $("#startDate").val(),
            sType: $("#type option:selected").val(),
            schoolId: $("#schoolId").val(),
            id: $("#Id").val(),
            footImg: $("#imgsourse").attr("src")
        };
        AjaxCustom({
            url: "/RispeSetting/InsertOrUpdate",
            type: "post",
            showLoading: true,
            parames: data,
            callBack: function (obj) {
                $("#editNameCloseBtn").click();//隐藏弹出层
                if (obj.code == 1) {
                    AlertMsg("操作成功");
                    pageIndex = 1;
                    GridData();
                }
                else if (obj.code == 3) {
                    AlertMsg("已存在类似数据，请勿重复操作");
                }
                else if (parseInt(obj.code) < 1) {
                    AlertMsg("操作失败");
                }
            }
        });
    }

    function GridData() {
        $("#gridTable").html("");
        AjaxCustom({
            url: "/RispeSetting/RecipeSettingPageList",
            type: "post",
            showLoading: true,//是否显示遮罩层
            parames: { pageIndex: pageIndex, pageSize: pageSize, times: $("#startDates").val() },
            callBack: function (obj) {
                var start = (obj.data.pageIndex - 1) * pageSize + 1;
                var end = obj.data.pageIndex * pageSize;
                $("#TotalCount").html(obj.data.total);//总行数
                if (obj.data.total == 0) {
                    $("#data_info").html("");
                    $("#gridTable").html("<tr><td colspan=\"6\" style='text-align:center;'><b style='color:red;'>暂无数据</b></td></tr>");
                    document.getElementById('paging1').innerHTML = "";//分页控件代码为空
                } else {
                    if (pageIndex == obj.data.pageCount) {
                        $("#data_info").html("显示 " + start + " 到 " + obj.data.total + " 共 " + obj.data.total + " 条");
                    } else {
                        $("#data_info").html("显示 " + start + " 到 " + end + " 共 " + obj.data.total + " 条");
                    }
                    //加载数据
                    var gridData = template('grid', obj.data);
                    $("#gridTable").html(gridData);
                    //加载分页控件
                    loadPager(obj.data.pageIndex, obj.data.pageCount);
                }
            }
        });
    }

    ///<summary>获得字符串实际长度，中文2，英文1</summary>
    function getTrutchTxtLength(str) {         
        ///<param name="str">要获得长度的字符串</param>
        var realLength = 0, len = str.length, charCode = -1;
        for (var i = 0; i < len; i++) {
            charCode = str.charCodeAt(i);
            if (charCode >= 0 && charCode <= 128) {
                realLength += 1;
            } else {
                realLength += 2;
            }
        }
        return realLength;
    };

</script>